<template>
  <div class="case">
    <div class="heigthBox">
      <div class="headerImg">
        <!-- <div>
          <div v-if="BakImg" class="title">{{ $t(`messages.case.caseImgList[0].title`) }}</div>
          <div v-else class="title">{{ $t(`messages.case.title`) }}</div>
        </div> -->

        <img v-if="BakImg" :src="$t(`messages.case.caseImgList[0].bakImg`)" alt="" />
        <img v-else src="../../assets/image/case/4.png" alt="" srcset="" />
      </div>
    </div>

    <div class="caseList">
      <div class="caseBox jusCenter" v-for="(item, index) in swiperData" :key="index">
        <div class="card">
          <div class="cardImgLeft">
            <div class="cardImgLeftHeard">
              <div class="title">{{ $t(`messages.case.caseList[${index}].title`) }}</div>
              <div class="size">
                {{ $t(`messages.case.caseList[${index}].detils`) }}
              </div>
            </div>
            <div class="centerButton center">FILM CASE</div>
            <div class="imgs">
              <img :src="$t(`messages.case.caseList[${index}].image1`)" alt="" srcset="" />
              <img :src="$t(`messages.case.caseList[${index}].image2`)" alt="" srcset="" />
            </div>
          </div>
          <div class="ritghImg">
            <img :src="$t(`messages.case.caseList[${index}].image3`)" alt="" srcset="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { caseTyepList, caseTyepList2, caseBakListType } from '@/http/api/case.js'
import Zh from '@/assets/i18n/langs/zh.js'
import En from '@/assets/i18n/langs/en.js'
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const route = useRoute()
const changeHeigth = () => {
  let heigthBox = document.querySelector('.heigthBox')
  heigthBox.style.height = `${swiperData.value.length * 5.55 + 5}rem`
}
let swiperData = ref([])
let type = ref('')
let pageData = reactive({
  page: 1,
  size: 50
})
const getProdectList = async () => {
  let res = ''
  if (pageData.type) {
    res = await caseTyepList2(pageData)
  } else {
    res = await caseTyepList(pageData)
  }
  console.log(res)
  Zh.messages.case.caseList = res.res.map((item) => {
    return {
      image1: item.image1Zh,
      image2: item.image2Zh,
      image3: item.rightImgZh,
      title: item.leftTitleZh,
      detils: item.leftDetilsZh
    }
  })
  En.messages.case.caseList = res.res.map((item) => {
    return {
      image1: item.image1En,
      image2: item.image2En,
      image3: item.rightImgEn,
      title: item.leftTitleEn,
      detils: item.leftDetilsEn
    }
  })
  swiperData.value = res.res
  changeHeigth()
}
let BakImg = ref([])
const getBakImg = async () => {
  const res = await caseBakListType({
    type: pageData.type
  })
  BakImg.value = res.res[0]
  console.log(res)
  Zh.messages.case.caseImgList = res.res.map((item) => {
    console.log(item)
    return {
      bakImg: item.bakImgZh,
      title: item.titleZh
    }
  })
  En.messages.case.caseImgList = res.res.map((item) => {
    return {
      bakImg: item.bakImgEn,
      title: item.titleEn
    }
  })
}
onMounted(() => {

  let url = window.location.href.toString()
  let filmNam = [{
    url: 'paint-protection-film-PPF',
    type: 'Paint Protection Film (PPF)',
    type2: '漆面膜'
  }, {
    url: 'color-paint-protection-film-PPF',
    type: 'Color Change Film',
    type2: '改色膜'
  }, {
    url: 'window-film',
    type: 'Window Tint Film',
    type2: '车顶膜'
  }, {
    url: 'sunroof-film',
    type: 'Roof Wrap Film',
    type2: '太阳膜'
  }]
  filmNam.forEach((item) => {
    if (url.includes(item.url)) {
      pageData.type = item.type
    }
  })
  getProdectList()
  getBakImg()
})
</script>

<style lang="scss" scoped>
.case {
  background: #1a1f20;
  position: relative;
}
.heigthBox {
  height: 6500px;
}
.headerImg {
  height: 900px;
  width: 100%;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .title {
    position: absolute;
    left: 20px;
    top: 30px;
    width: 800px;
    font-size: 165px;
    font-weight: bold;
    color: #ffdd00;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
}
.caseList {
  position: absolute;
  left: 0;
  top: 800px;
  width: 100%;
}
.caseBox {
  .card {
    width: 1800px;
    height: 1000px;
    border-radius: 60px;
    background: #181c1d;
    margin-bottom: 100px;
    overflow: hidden;
    display: flex;
    padding: 50px;
    align-items: center;
    position: relative;
  }
  .centerButton {
    font-family: GothamBlack;
    width: 200px;
    height: 70px;
    background: #ffdd00;
    border-radius: 10px;
    font-weight: bold;
    font-size: 30px;
    color: #181c1d;
  }
  .ritghImg {
    position: absolute;
    right: 20px;
    bottom: 80px;
    width: 800px;
    height: 700px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .cardImgLeft {
    .cardImgLeftHeard {
      margin-bottom: 250px;
      .title {
        font-size: 42px;
        font-weight: bold;
        color: #ffdd00;
      }
      .size {
        width: 700px;
        color: white;
        white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
        overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
        word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
      }
    }
    .imgs {
      display: flex;
      align-items: center;
      margin-top: 50px;
      img {
        width: 350px;
        height: 350px;
        margin-right: 80px;
      }
    }
  }
}
.cardText {
  justify-content: space-between;
  padding: 20px 80px;
  .title {
    font-size: 42px;
    font-weight: bold;
    color: #ffdd00;
  }
  .size {
    width: 700px;
    color: white;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
  .size2 {
    width: 500px;
    color: white;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
}
</style>